<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
    <div class="h_panel">
        <HPanelGrid></HPanelGrid>
        <HPanelCanvas></HPanelCanvas>
        <canvas ref="canvasRef" id="h_fabric_canvas" :style="{
            width: canvasAttr.canvasWidth * canvasAttr.canvasScale + 'px',
            height: canvasAttr.canvasHeight * canvasAttr.canvasScale + 'px',
        }"></canvas>
    </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入组件
/* ================================================================================================ */
import { HPanelGrid } from "../HPanelGrid"
import { HPanelCanvas } from "../HPanelCanvas"
import { storeToRefs } from "pinia";// 引入pinia
import { useEditorStore } from "../../store"; // 引入存储
const myStore = useEditorStore(); // 使用存储
let {
    canvasAttr
} = storeToRefs(myStore);//解构-画布


let canvasRef = ref()//画布参数

/* ================================================================================================ */
//                                ★ 钩子函数_挂载后
/* ================================================================================================ */
onMounted(() => {
    console.log("面板-钩子函数_挂载后")
    /**  */
})
</script>

<style lang="scss" scoped>
.h_panel {
    width: 100%;
    height: 100%;
    border: 1px solid rgb(197, 197, 197);

    position: relative;
    overflow-x: scroll;
    overflow-y: scroll;

    /* firefox */
    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
    scrollbar-width: auto;

    /* chrome */
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track-piece {
        background-color: transparent;
    }

    &::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: rgb(197, 197, 197);
    }
}
</style>